<template>
	<view class="content poRel">
		<view style="height: 162rpx;"></view>
		<view class="dis disAl disJuC">
			<image :src="iconimg" style="width: 219rpx;height: 219rpx;"></image>
		</view>
		<view class="textCen foSi40 fowe800 mar-top10">{{title}}</view>
		<view class="wid90 mar" style="margin-top: 90rpx;">
			<view class="borRad40 dis disAl disJuC" style="height: 90rpx;background-color: #EEEEEE;">
				<input class="wid90" v-model="phone" type="number" placeholder="请输入手机号" />
			</view>
			<view class="borRad40 dis disAl disJuC mar-top30" style="height: 90rpx;background-color: #EEEEEE;">
				<input style="width: 65%;" v-model="code" placeholder="请输入验证码" />
				<view v-if="sec == 0" @click="getCheckNum()" class="dis disAl disJuC wid25" style="color: #9D9D9D;">
					获取验证码</view>
				<view v-if="sec > 0" class="dis disAl disJuC wid25" style="color: #9D9D9D;">{{sec}}s</view>
			</view>
			<view class="dis disAl disJuC foSi25 hei86" style="margin-top: 50rpx;" @click="xieyiClick()">
				<view v-if="xieyi" class="dis disAl disJuC borRad50"
					style="width: 26rpx;height: 26rpx;border: 1rpx solid #00AD27;">
					<view class="borRad50" style="width: 14rpx;height: 14rpx;background-color: #00AD27;"></view>
				</view>
				<view v-if="!xieyi" class="dis disAl disJuC borRad50"
					style="width: 26rpx;height: 26rpx;border: 1rpx solid #818181;"></view>
				<view class="mar-left10" style="color: #7A7A7A;">
					<span>我已阅读</span>
					<span :style="{'color': theme.main_color}"
						@click.stop="tiaozhuan('/pages/common/richtext?type=3')">《用户协议》</span>
					<span>和</span>
					<span :style="{'color': theme.main_color}"
						@click.stop="tiaozhuan('/pages/common/richtext?type=1')">《隐私协议》</span>
				</view>
			</view>
			<view class="borRad40 dis disAl disJuC foSi35 coFFF" @click="denglu()"
				style="height: 100rpx;margin-top: 80rpx;" :style="'background-color: '+theme.main_color+';'">登录</view>
		</view>
		<view class="wid100 poAbs" style="bottom: 70rpx;">
			<view class="textCen foSi25" style="color: #777777;">其他登录方式</view>
			<view class="dis mar-top40" style="justify-content: space-around;">
				<view style="width: 120rpx;" @click="tiaozhuan1('/pages/login/wxLogin')">
					<view class="dis disJuC">
						<image src="../../static/weixinLogin.png" style="width: 88rpx;height: 88rpx;"></image>
					</view>
					<view class="textCen foSi25 mar-top10" style="color: #777777;">微信</view>
				</view>
				<!-- #ifdef APP -->
				<view style="width: 120rpx;" @click="yijiandenglu()">
					<view class="dis disJuC">
						<image src="../../static/phoneLogin.png" style="width: 88rpx;height: 88rpx;"></image>
					</view>
					<view class="textCen foSi25 mar-top10" style="color: #777777;">一键登录</view>
				</view>
				
				<view style="width: 120rpx;" @click="apple_login" v-if="platform == 'ios' && system >= '13'" >
					<view class="dis disJuC">
						<image src="../../static/ios.png" style="width: 88rpx;height: 88rpx;"></image>
					</view>
					<view class="textCen foSi25 mar-top10" style="color: #777777;">苹果</view>
				</view>
				<!-- #endif -->

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				xieyi: false,
				phone: '',
				code: '',
				sec: 0, //这是重新获取验证码的倒计时
				title: '',
				iconimg: '',
				theme: null,
				// xitong:'ios'
                system: '', // 系统版本
                platform: '',   // 平台 
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:(res) => {
					console.log(res)
					this.system = res.system  // ios
					this.platform = res.platform  // 14.3
				}
			})
			this.theme = uni.getStorageSync('theme')
			this.iconimg = uni.getStorageSync('platform').iconimg
			this.title = uni.getStorageSync('platform').title
			
		},
		methods: {
			
			mobile_login_auth(phone){
				let that = this
				console.log('去登录的手机号',phone)
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/user/mobile_login_auth',
					method: "POST",
					header: {
						'site-id': that.global.site_id //自定义请求头信息
					},
					data: {
						mobile: phone,
						source: 'APP',
						distr_id: uni.getStorageSync('distr_id')
					},
					success(res) {
						console.log(res)
						let result = res.data
						if (result.code == 1) {
							
							uni.setStorageSync('token', result.data);
							// uni.navigateBack(1)
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 500)
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})
			},
			
			
			
			denglu() {
				var that = this;
				var source = 'h5'
				// #ifdef APP
				source = 'app'
				// #endif

				//正则表达式定义手机号正确格式
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!reg.test(this.phone)) {
					return uni.showToast({
						title: '手机号错误',
						icon: 'error',
						duration: 2000
					})
				};
				if (!that.code) {
					return uni.showToast({
						title: '请输入验证码',
						icon: 'error',
						duration: 2000
					})
				};
				if (!that.xieyi) {
					return uni.showToast({
						title: '请勾选用户协议',
						icon: 'error',
						duration: 2000
					})
				}
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/user/mobile_login',
					method: "POST",
					header: {
						'site-id': that.global.site_id //自定义请求头信息
					},
					data: {
						mobile: that.phone,
						code: that.code,
						source: source,
						wx_code: uni.getStorageSync('code'),
						distr_id: uni.getStorageSync('distr_id')
					},
					success(res) {
						console.log(res)
						let result = res.data
						if (result.code == 1) {
							uni.setStorageSync('token', result.data);
							// uni.navigateBack(1)
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 500)
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})
			},
			yijiandenglu() {
				console.log("手机号一键登录")
				var this_ = this
				// if (!this_.xieyi) {
				// 	return uni.showToast({
				// 		title: '请勾选用户协议',
				// 		icon: 'error',
				// 		duration: 2000
				// 	})
				// }
				
				// 预登陆
				uni.preLogin({
					provider: "univerify",
					success: () => {
						uni.login({
							provider: "univerify",
							univerifyStyle: {
								fullScreen: false, // 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。
								backgroundColor: "#ffffff", // 授权页面背景颜色，默认值：#ffffff
								phoneNum: {
									color: "#000000", // 手机号文字颜色 默认值：#000000
									fontSize: "22" // 手机号字体大小 默认值：18
								},
								slogan: {
									color: "#CDCDCD", //  slogan 字体颜色 默认值：#8a8b90
									fontSize: "12"
								},
								"icon": {
									"path": "static/login.png", // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
									"width": "149rpx", //图标宽度 默认值：60px
									"height": "149rpx" //图标高度 默认值：60px
								},
								authButton: {
									normalColor: "#00cb64", // 授权按钮正常状态背景颜色 默认值：#3479f5
									highlightColor: "#00cb64", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
									disabledColor: "#13cb60", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
									textColor: "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
									title: "一键登录" // 授权按钮文案 默认值：“本机号码一键登录”
								},
								otherLoginButton: {
									visible: "false", // 是否显示其他登录按钮，默认值：true"visible": "true", // 是否显示其他登录按钮，默认值：true
									normalColor: "#ffffff", // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
									highlightColor: "#ffffff", // 其他登录按钮按下状态背景颜色 默认值：#dedede
									textColor: "#CDCDCD", // 其他登录按钮文字颜色 默认值：#000000
									title: "其他手机号码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”"borderWidth": "1px", // 边框宽度 默认值：1px（仅ios支持）
									borderColor: "#ffffff", //边框颜色 默认值： #c5c5c5（仅ios支持）
									borderWidth: "0" // 边框宽度 默认值：1px（仅ios支持）
								},
								privacyTerms: {
									defaultCheckBoxState: "false", // 条款勾选框初始状态 默认值： true
									textColor: "#7A7A7A", // 文字颜色 默认值：#8a8b90
									termsColor: "#00CB64", //  协议文字颜色 默认值： #1d4788
									prefix: "我已阅读", // 条款前的文案 默认值：“我已阅读并同意”
									"suffix": "", // 条款后的文案 默认值：“并使用本机号码登录”
									fontSize: "12", // 字体大小 默认值：12,
									uncheckedImage: "static/logins/wgouxuan.png", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)
									checkedImage: "static/logins/gouxuan.png", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)
									privacyItems: [
										// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
										{
											url: this_.url + 'addon/qianyu_smfw/h5/index.html#/pages/common/richtext?type=3', // 点击跳转的协议详情页面
											title: "用户协议" // 协议名称
										},
										{
											url: this_.url + 'addon/qianyu_smfw/h5/index.html#/pages/common/richtext?type=1', // 点击跳转的协议详情页面
											title: "隐私政策" // 协议名称
										}
									]
								}
							},
							success: (res) => {
								// console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 toke n'}
								// 在得到access_token后，通过callfunction调用云函数
								uniCloud.callFunction({
									name: 'getPhoneNumber', // 云函数名称
									data: { //传给云函数的参数
										'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token
										'openid': res.authResult.openid // 客户端一键登录接口返回的openid
									}
								}).then(dataRes => {
									console.log('云函数返回的参数', dataRes)
									let phonenumber = dataRes.result.phoneNumber
									this_.mobile_login_auth(dataRes.result.phoneNumber)
									uni.closeAuthView() //关闭一键登录弹出窗口
									console.log('登录成功', dataRes)
								}).catch(err => {
									console.log('云函数报错', err)
								})
							},
							fail(err) {
								uni.closeAuthView() //关闭一键登录弹出窗口
							}
						})
					},
					fail(res) {
						uni.closeAuthView() //关闭一键登录弹出窗口
						console.log("一键登录uni.preLogin失败", res)
						if (res.errMsg != "login:ok") {
							// 这里注意有个小坑: 不同运营商,返回的报错字段不同, 经过测试, 以下几乎包含了三大运营商报错字段
							uni.showToast({
								title: res.errMsg || res.metadata.resultMsg || res.metadata.error_data ||
									res.metadata.resultDesc || "请检查是否插入有效sim卡及开启蜂窝数据网络",
								icon: "none"
							})
						}
					}
				})
			},
			xieyiClick() {
				this.xieyi = !this.xieyi
			},
			checkPhone(phone) {
				if (!(/^1[3456789]\d{9}$/.test(phone))) {
					return false;
				}
				return true;
			},
			getCheckNum() {
				var that = this;
				if (!that.checkPhone(that.phone)) {
					return uni.showToast({
						title: '手机号错误',
						icon: 'none'
					})
				}
				// 初始化定时器
				let t = null;
				// 倒计时1分钟
				this.sec = 60
				that.getCode()
				// 计时器清零
				clearInterval(t);
				// that.sendcode()
				t = setInterval(() => {
					// 当倒计时完时，显示重新发送
					if (this.sec == 0) {
						clearInterval(t);
						return;
					}
					// 实现倒计时效果
					this.sec--;
				}, 1000)

			},
			getCode() {
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/common/send_code',
					method: "POST",
					header: {
						'site-id': that.global.site_id //自定义请求头信息
					},
					data: {
						mobile: that.phone
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							uni.showToast({
								title: result.msg,
								//显示持续时间为 2秒
								duration: 2000
							})
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			},
			tiaozhuan1(url) {
				// #ifdef H5
				uni.redirectTo({
					url: url
				})
				// #endif
				// #ifdef APP
				//APP登录
				let that = this
				// 判断是否同意协议
				if (!that.xieyi) {
					return uni.showToast({
						title: '请勾选用户协议',
						icon: 'error',
						duration: 2000
					})
				}
				uni.login({
					provider: 'weixin', //使用微信登录
					onlyAuthorize: true,
					success: function(loginRes) {
						console.log('返回值')
						console.log(loginRes);
						uni.showLoading({
							title:'登陆中...'
						})
						uni.request({
							url: that.global.url + 'api/qianyu_smfw/user/app_wechat_login',
							method: "POST",
							header: {
								'site-id': that.global.site_id //自定义请求头信息
							},
							data: {
								codes: loginRes.code
							},
							success(res) {
								uni.hideLoading()
								let result = res.data
								console.log(result)
								if (result.code == 1) {
									uni.setStorageSync('token', result.data);
									// uni.navigateBack(1)
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}, 200)
								} else {
									uni.showToast({
										title: result.msg,
										//将值设置为 success 或者直接不用写icon这个参数
										icon: 'error',
										//显示持续时间为 2秒
										duration: 2000
									})
								}
							},fail(err) {
								uni.hideLoading()
							}
						})
					},
					fail(err) {
						console.log(err)
					}
				});
				// #endif
			},
			apple_login() {
				let that = this
				if (!that.xieyi) {
					return uni.showToast({
						title: '请勾选用户协议',
						icon: 'error',
						duration: 2000
					})
				}
				uni.login({
					provider: 'apple',
					success: function(loginRes) {
						// 登录成功
						console.log(loginRes)
						uni.getUserInfo({
							provider: 'apple',
							success: function(info) {
								console.log(info)
								// 获取用户信息成功, info.authResult中保存登录认证数据
								uni.showLoading({
									title:'登陆中...'
								})
								uni.request({
									url: that.global.url + 'api/qianyu_smfw/user/apple_login',
									method: "POST",
									header: {
										'site-id': that.global.site_id //自定义请求头信息
									},
									data: {
										apple_id: info.userInfo.openId
									},
									success(res) {
										uni.hideLoading()
										let result = res.data
										console.log(result)
										if (result.code == 1) {
											uni.setStorageSync('token', result.data);
											// uni.navigateBack(1)
											setTimeout(() => {
												uni.switchTab({
													url: '/pages/index/index'
												})
											}, 200)
										} else {
											uni.showToast({
												title: result.msg,
												//将值设置为 success 或者直接不用写icon这个参数
												icon: 'error',
												//显示持续时间为 2秒
												duration: 2000
											})
										}
									},fail(err) {
										uni.hideLoading()
									}
								})
							}
						})
					},
					fail: function(err) {
						console.log(err)
						// 登录授权失败
						// err.code错误码参考`授权失败错误码(code)说明`
					}
				});
			},
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
	}
</style>